<template>
  <div class="teacher-display">
    <div class="head">
      <div class="title">
        教师发展
      </div>
      <div class="more">更多<img :src="moreIcon"/></div>
    </div>
    <swiper :options="swiperOption">
      <swiper-slide class="swiper-slide">
        <teacher-display-item/>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <teacher-display-item/>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <teacher-display-item/>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <teacher-display-item/>
      </swiper-slide>
    </swiper>
    <!--    <div style="display: flex">-->
    <!--      <teacher-display-item/>-->
    <!--      <teacher-display-item/>-->
    <!--      <teacher-display-item/>-->
    <!--      <teacher-display-item/>-->
    <!--    </div>-->
  </div>
</template>

<script>
import moreIcon from './image/more_icon.png'
import teacherDisplayItem from './teacher-display-item'

export default {
  name: "index",
  data() {
    return {
      moreIcon,
      swiperOption: {
        slidesPerView: 4,
        //自动轮播
        autoplay: {
          delay: 2000,
          //当用户滑动图片后继续自动轮播
          disableOnInteraction: false,
        },
        //开启循环模式
        loop: true
      },
    }
  },
  components: {
    teacherDisplayItem
  }
}
</script>

<style lang="scss" src="./index.scss" scoped>

</style>